<template>
  <el-pagination
    size="small"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    style="margin:20px 0 20px 0 ;float: right"
    v-if="page.total>0"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="[10, 20, 30, 40, 50]"
    :current-page="page.current"
    :page-size="page.size"
    :total="page.total">
  </el-pagination>
</template>

<script>
export default {
  props: {
    page: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: { current: 1, size: 10, total: 0 }
    },
    currentChange: { type: Function },
    sizeChange: { type: Function }
  },
  data () {
    return {

    }
  },
  methods: {
    handleSizeChange (e) {
      this.sizeChange(e)
    },
    handleCurrentChange (e) {
      this.currentChange(e)
    }
  }
}
</script>

<style scoped>

</style>
